<template>

	<view>
		<!-- 缩略图 -->
		<view>

			<view class="content-item">
				<view class="content-wrapper">
					<image class="content-image" :src="productInfo.iconUrl||'/static/index/img.png'"></image>
					<view class="content-details">
						<view class="content-info">
							<view class="content-title">
								<text>{{productInfo.name||"—"}}</text>
							</view>
							<view class="content-instruction">
								<text>{{productInfo.detail}}</text>
							</view>

							<view class="content-price">
								<view>
									<text>¥{{productInfo.priceList[0].price}}</text>
								</view>
								<view>
									<text>×1{{orderList.num||0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>


		<!-- 详情 -->
		<view>

			<uni-list>
				<uni-list-item title="实付款" right-text="100" />
				<uni-list-item title="订单编号" rightText="20205151125241" />
				<uni-list-item title="创建时间" :rightText="productInfo.createTime" />
				<uni-list-item title="付款时间" :rightText="productInfo.createTime" />
			</uni-list>

		</view>


		<!-- 数据详情 -->
		<view>

			<uni-card title="数据详情">
				<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
			</uni-card>

		</view>

		<!-- 说明 -->
		<view>


			<uni-card title="说明">
				<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
			</uni-card>


		</view>

		<view class="price-box">
			<view class="bt-box">

				<button class="bt" plain="true">取消申请</button>
			</view>
			<view class="bt-box">
				<button class="bt-pay" plain="true" @click="submit()">去支付</button>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		toPay
	} from '../../api/trade';
	import {
		getProductInfo
	} from "@/api/product";
	export default {
		data() {
			return {

				orderList: '',
				productId: '',
				priceId: '',
				productInfo: {},

			};
		},
		onLoad(options) {
			// this.loadData(),

			this.productId = options.id;
			this.priceId = options.priceId

			console.log("pro:", this.productId);
			if (this.productId) {
				this.$api.msg(`点击了${this.productId}`);
			}
			this.loadData();
		},
		methods: {
			showFullContent(item) {
				// handle displaying the full content of the selected item
				console.log(item.fullContent);
			},
			async loadData() {
				let data = await getProductInfo(this.productId);
				this.productInfo = data.data;
			},
			// 提交申请单
			async submit() {
				const parame = {
					"tradeCartList": [{
						"id": '',
						"number": 1,
						"priceId": this.priceId,
						"productId": this.productId
					}]
				};

				let res = await toPay(parame)

				if (res.code === 200) {

					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000
					});

				}
			},
		}
	}
</script>

<style lang="scss">
	.content-item {
		padding: 10px;

	}

	.content-wrapper {
		display: flex;
		align-items: center;
	}

	.content-image {
		width: 220upx;
		height: 220upx;
	}

	.content-details {
		flex: 1;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		justify-content: space-between;
	}

	.content-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 220upx;
		padding: 30upx 0 30upx 0;
	}

	.content-title {
		max-height: 3.0em;
		/* 设置标题最多显示两行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 设置最大行数 */
		-webkit-box-orient: vertical;
		color: white;

	}

	.content-details {
		margin-top: 5px;
		/* 设置时间与标题间距 */
		color: darkgray;

	}

	.content-price {
		color: white;
		display: flex;
		justify-content: space-between;
	}



	.expand-button {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		float: right;
	}


	.price-box {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		padding: 20upx 30upx;
		font-size: $font-sm + 2upx;
		color: $font-color-light;

		.bt-box {
			margin-right: 20upx;

			.bt {
				border-radius: 50upx;
				width: 220upx;
				height: 75upx;
				border: darkgray 1px solid;
				color: #fff;
				font-size: $font-base +4upx;
			}

			.bt-pay {
				border-radius: 50upx;
				width: 190upx;
				height: 75upx;
				border: #66c2ff 1px solid;
				color: #66c2ff;
				font-size: $font-base +4upx;
				line-height: 75upx;
			}

		}
	}
</style>